<script setup lang="ts">
import { ref, unref, computed, MaybeRef } from "vue"
import { Card, Button, TableColumnsType } from "ant-design-vue"
import {
  PaginationParams,
  SearchDataSource,
  ClosuredDataSource,
  RestSelectFormatter,
  Filter,
} from "@purchasing/components"
import api from "@/api"

// 使用关键字查询数据
const getSelectOptions: SearchDataSource = (
  params: MaybeRef<{ keyword: string }>,
  pagination: MaybeRef<PaginationParams>,
) => {
  return api.useGetResources(
    computed(() => ({ keyword: unref(params).keyword })),
    pagination,
  )
}

// 将返回的数据格式化为选项
const formatSelectOptions: RestSelectFormatter = (item: any) => ({
  label: item.property1!,
  value: item.property2!,
})

// 表格定义
const columns: TableColumnsType = [
  { key: "id", title: "序号", dataIndex: "id" },
  { key: "property1", title: "属性1", dataIndex: "property1" },
  { key: "property2", title: "属性2", dataIndex: "property2" },
]

const filters: Filter<any>[] = [
  { label: "关键字", prop: "keyword", type: "input" },
  {
    label: "选项",
    prop: "keyword",
    type: "select",
    options: [
      { label: "选项1", value: "option1" },
      { label: "选项2", value: "option2" },
    ],
  },
  {
    label: "查询选项",
    prop: "keyword",
    type: "select",
    options: { datasource: getSelectOptions, formatter: formatSelectOptions },
  },
]

// 查询参数
const searchParams = ref<any>({ keyword: "hello" })

const paginationParams = ref<PaginationParams>({ page: 1, size: 10 })

const { isFetching, data, error, execute } = api.useGetResources(
  searchParams,
  paginationParams,
)

const options = computed(() => {
  return data.value ? data.value.content?.map(formatSelectOptions) : []
})

// 取数接口
const getResources: ClosuredDataSource = () => {
  return { isFetching, data, error, execute }
}

function onSearch() {
  paginationParams.value.page = 1
  execute()
}

const selected = ref([])
</script>

<template>
  <div
    class="pc-grid pc-min-w-96 pc-grid-cols-1 pc-gap-8 pc-p-8 md:pc-grid-cols-2 lg:pc-grid-cols-3 xl:pc-grid-cols-4 2xl:pc-grid-cols-5"
  >
    <Card class="pc-col-span-1 pc-w-full" title="选择器">
      <PcFormItem label="选项">
        <PcSelect
          class="pc-w-full"
          v-model="searchParams.keyword"
          :options="options"
        ></PcSelect>
      </PcFormItem>
    </Card>
    <Card class="pc-col-span-1 pc-w-full" title="查询选择器">
      <PcFormItem label="选项">
        <PcRestSelect
          v-model="searchParams.keyword"
          :datasource="getSelectOptions"
          :formatter="formatSelectOptions"
        />
      </PcFormItem>
    </Card>
    <Card class="pc-col-span-1 pc-w-full md:pc-col-span-2" title="查询过滤器">
      <PcRestFilter v-model="searchParams" :filters="filters">
        <template #default>
          <Button type="primary" @click="onSearch">查询</Button>
        </template>
      </PcRestFilter>
    </Card>
    <Card class="pc-col-span-1 pc-w-full md:pc-col-span-2" title="查询表格">
      <div>已选择： {{ JSON.stringify(selected) }}</div>
      <PcRestTable
        v-model:pagination="paginationParams"
        row-key="property1"
        v-model:selected="selected"
        :columns="columns"
        :datasource="getResources"
        :scroll="{ y: '12rem' }"
        :paginationShowTotal="true"
      />
    </Card>
  </div>
</template>
